<script setup lang="ts">
import type { CategoryItemVO } from "@/types/homeType";

interface CategoryPanelProps {
   list: CategoryItemVO[];
}

defineProps<CategoryPanelProps>();

const goToGoodList=(categoryId: string) => {
   uni.navigateTo({
      url:`/subPackages/goodList/goodList?categoryId=${categoryId}`,
   })
}

</script>

<template>
   <view class="category">
      <view class="category-item" hover-class="none" v-for="item in list" :key="item.id" @tap="goToGoodList(item.id)">
         <image class="icon" :src="item.icon"></image>
         <text class="text">{{item.name}}</text>
      </view>
   </view>
</template>

<style scoped lang="scss">
.category {
   margin: 20rpx 0 0;
   padding: 10rpx 0;
   display: flex;
   flex-wrap: wrap;
   min-height: 328rpx;

   .category-item {
      width: 150rpx;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      box-sizing: border-box;

      .icon {
         width: 100rpx;
         height: 100rpx;
      }

      .text {
         font-size: 26rpx;
         color: #666;
      }
   }
}
</style>